<template>
    <el-aside width="20%" style="background-color: rgb(238, 241, 246)">
        <div style="display: flex;">
            <el-input
                    placeholder="请输入国家英文"
                    prefix-icon="el-icon-search"
                    v-model="inputCount"
                    clearable

                    @clear="inputCount='',cities=[]">
            </el-input>
            <el-button @click="getCountries" size="small" type="primary" icon="el-icon-search">搜索</el-button>

        </div>
        <el-menu>
            <el-menu-item-group>
                <el-menu-item @click="pickedCity.value=city,pickedCoun.value=searchCount" v-for="city in cities">
                    {{searchCount}}--{{city}}
                </el-menu-item>
            </el-menu-item-group>
        </el-menu>
    </el-aside>
</template>

<script>

    import {instance as axios} from '../config/globalModel'

    export default {
        data() {
            return {
                cities: [],
                count: 1,
                searchCount: "",
                inputCount:""
            }
        },
        inject: ['pickedCoun', 'pickedCity'],
        created() {

        },
        methods: {
            getCountries() {
                axios.get(`/${this.inputCount}`)
                    .then(res => {
                        this.cities = []
                        var arr = ["all"]
                        if (res.data.data.length >= 1) {
                            arr=arr.concat(res.data.data)
                            this.cities=arr
                            this.searchCount=this.inputCount
                        }

                    })
            }
        },
        watch: {},
        setup() {

        }
    }
</script>

<style scoped>
    .el-aside {
        color: #333;
    }
</style>